'use client'
import { useEffect, useState } from 'react'
import style from './index.module.scss'
import TableComponent from '@/components/Table'
import { deleteHouseInfoApi, getHouseInfoApi, getHouseInfoByIdApi, addHouseInfoApi, updateHouseInfoApi } from '@/apis/baseinfo'
import { Button, Col, Divider, Popconfirm, Row, Select, Space, Typography } from 'antd'
import DetailModel from '@/components/DetailModel'
import ChangeModel from '@/components/ChangeModel'

export default function House() {
  // ChangeModel是否显示
  const [showChangeModel, setShowChangeModel] = useState(false)
  // ChangeModel的模式
  const [mode, setMode] = useState('add')

  // 详情弹窗显示
  const [isOpen, setIsOpen] = useState(false)
  // 修改成功
  const [successChange, setSuccessChange] = useState(false)
  const [houseId, setHouseId] = useState(0)
  // 内容
  const titleList = [
    {
      title: '序号',
      dataIndex: 'id'
    },
    {
      title: '房产类型',
      dataIndex: 'property_type'
    },
    {
      title: '区域',
      dataIndex: 'area'
    },
    {
      title: '面积',
      dataIndex: 'size'
    },
    {
      title: '几室几厅',
      dataIndex: 'room_layout'
    },
    {
      title: '楼层索引(房屋编号)',
      dataIndex: 'floor_index'
    },
    {
      title: '装修',
      dataIndex: 'decoration'
    },
    {
      title: '房屋类型',
      dataIndex: 'house_type'
    },
  ]

  // 删除一条数据
  const deleteResident = async id => {
    const res = await deleteHouseInfoApi(id)
    await res.json()
    goSearch(pageNumber, pageSize)
  }

  const [dataSource, setDataSource] = useState([])
  const [loading, setLoading] = useState(false)
  // 房子类型
  const [propertyType, setPropertyType] = useState([])
  // 当前房子类型
  const [currentPropertyType, setCurrentPropertyType] = useState('房产类型')
  // 监听下拉框选择事件
  const propertyTypeChange = (e) => {
    setCurrentPropertyType(e)
  }

  // 区域
  const [area, setArea] = useState([])
  // 当前区域
  const [currentArea, setCurrentArea] = useState('区域')
  // 监听下拉框选择事件
  const areaChange = (e) => {
    setCurrentArea(e)
  }

  // 装修
  const [decoration, setDecoration] = useState([])
  // 当前装修
  const [currentDecoration, setCurrentDecoration] = useState('装修')
  // 监听下拉框选择事件
  const decorationChange = (e) => {
    setCurrentDecoration(e)
  }

  // 房屋类型
  const [houseType, setHouseType] = useState([])
  // 当前房屋类型
  const [currentHouseType, setCurrentHouseType] = useState('房屋类型')
  // 监听下拉框选择事件
  const houseTypeChange = (e) => {
    setCurrentHouseType(e)
  }

  // 当前页数
  const [pageNumber, setPageNumber] = useState(0)
  // 总记录数
  const [recordCount, setRecordCount] = useState(0)
  // 每页记录数
  const [pageSize, setPageSize] = useState(0)
  // 获取数据
  const lodaData = async (e, p, zh_properties, area, decoration, house_type) => {
    setLoading(true)
    const res = await getHouseInfoApi(e, p, zh_properties, area, decoration, house_type)
    const resObj = await res.json()
    // console.log(resObj.data)
    setPageNumber(resObj.data.current)
    setRecordCount(resObj.data.total)
    setPageSize(resObj.data.size)
    setPropertyType(resObj.data.type)
    setArea(resObj.data.area)
    setDecoration(resObj.data.decoration)
    setHouseType(resObj.data.house_type)
    setDataSource(resObj.data.data.map(item => ({
      key: item.id,
      ...item
    })))
    setLoading(false)
  }
  useEffect(() => {
    lodaData(1)
  }, [])
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '房产类型',
      dataIndex: 'property_type',
      key: 'property_type',
    },
    {
      title: '区域',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '面积',
      dataIndex: 'size',
      key: 'size',
    },
    {
      title: '几室几厅',
      dataIndex: 'room_layout',
      key: 'room_layout',
    },
    {
      title: '楼层索引(房屋编号)',
      dataIndex: 'floor_index',
      key: 'floor_index',
    },
    {
      title: '装修',
      dataIndex: 'decoration',
      key: 'decoration',
    },
    {
      title: '房屋类型',
      dataIndex: 'house_type',
      key: 'house_type',
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'operation',
      render: id => (
        <Space>
          <Button size='small' onClick={() => {
            setIsOpen(true)
            setHouseId(id)
          }}>详细</Button>
          <Button size='small' onClick={() => {
            setShowChangeModel(true)
            setMode('update')
            setHouseId(id)
          }}>修改</Button>
          <Popconfirm
            title="提示"
            description="删除操作不可撤销!您确认吗？"
            okText='确认'
            cancelText='放弃'
            onConfirm={() => deleteResident(id)}
          >
            <Button size='small' danger type=''>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ]

  // 分页信息
  const pagination = {
    current: pageNumber,
    defaultCurrent: 1,
    position: ['bottomRight'],
    total: recordCount,
    defaultPageSize: 10,
    pageSize: pageSize,
    showSizeChanger: true,
    onChange: (e, pageSize) => goSearch(e, pageSize),
  }

  // 查询触发
  const goSearch = (e, pageSize) => {
    const p = currentPropertyType === '房产类型' ? '' : currentPropertyType
    const a = currentArea === '区域' ? '' : currentArea
    const d = currentDecoration === '装修' ? '' : currentDecoration
    const h = currentHouseType === '房屋类型' ? '' : currentHouseType
    lodaData(e, pageSize, p, a, d, h)
  }
  return (
    <div className={style['house_container']}>
      <Typography.Title level={3}>房屋信息</Typography.Title>
      <Divider style={{ margin: '5px 0 10px', borderColor: '#7cb305', }}></Divider>
      <Row style={{ marginBottom: '10px' }}>
        <Col span={5}>
          <Select
            value={currentPropertyType}
            style={{ width: 180 }}
            options={propertyType}
            onChange={propertyTypeChange}
          />
        </Col>
        <Col span={5}>
          <Select
            value={currentArea}
            style={{ width: 180 }}
            options={area}
            onChange={areaChange}
          />
        </Col>
        <Col span={5}>
          <Select
            value={currentDecoration}
            style={{ width: 180 }}
            options={decoration}
            onChange={decorationChange}
          />
        </Col>
        <Col span={5}>
          <Select
            value={currentHouseType}
            style={{ width: 180 }}
            options={houseType}
            onChange={houseTypeChange}
          />
        </Col>
        <Col span={4}>
          <Space>
            <Button type='primary' onClick={() => goSearch(pageNumber, pageSize)}>查询</Button>
            <Button type='primary' onClick={() => {
              setShowChangeModel(true)
              setMode('add')
            }}>添加</Button>
          </Space>
        </Col>
      </Row>
      <TableComponent pagination={pagination} residentList={dataSource} columns={columns} loading={loading} />
      <DetailModel method={getHouseInfoByIdApi} successChange={successChange} id={houseId} title={'房屋信息'} isOpen={isOpen} setIsOpen={setIsOpen} titleList={titleList} />
      <ChangeModel id={houseId} method={getHouseInfoByIdApi} changeApi={updateHouseInfoApi} goSearch={() => {goSearch(1, pageSize)}} addApi={addHouseInfoApi} titleList={titleList} mode={mode} isShow={showChangeModel} setIsShow={() => setShowChangeModel(false)} />
    </div>
  )
}
